<script lang="ts" setup>
import { getDepartment } from '@/apis/quickEntry'
import type { Department } from '@/types/quickEntry'
import { onMounted, ref } from 'vue'

// 获取路由参数
const props = defineProps<{
  type: string
  illnessType: string
}>()
onMounted(() => {
  getDepartmentList()
})
// 获取科室列表
const departmentList = ref<Department[]>([])
const getDepartmentList = async () => {
  const res = await getDepartment()
  departmentList.value = res.data
}
// 当前选中的科室
const activeIndex = ref(0)
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in departmentList"
        :key="item.id"
        class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/description/description?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
        class="department-item"
        v-for="item in departmentList[activeIndex]?.child"
        :key="item.id"
        :style="{ color: '#999' }"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
